.play {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;

  &__lattice {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  &__setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;

    &-random {
      width: 275px;
      height: 72px;
      background-image: url('/button.png');
      background-repeat: no-repeat;
      background-position: -852px -380px;
      zoom: 0.4;

      &:active {
        background-position: -852px -450px;
      }

      &--disabled {
        background-position: -638px -746px;

        &:active {
          background-position: -638px -746px !important;
        }
      }
    }

    &-auto {
      width: 282px;
      height: 63px;
      background-image: url('/button.png');
      background-repeat: no-repeat;
      background-position: -1402px 0;
      zoom: 0.4;

      &--checked {
        background-position: -1402px -124px;
      }

      &--disabled {
        background-position: -570px -380px;
      }

      &--checked-disabled {
        background-position: -570px -504px;
      }
    }

    &-mines {
      position: relative;
      width: 274px;
      height: 72px;
      background-image: url('/button.png');
      background-repeat: no-repeat;
      background-position: 0 -867px;
      zoom: 0.4;

      &:active {
        background-position: 0 -937px;
      }

      &--disabled {
        background-position: -738px -675px;

        &:active {
          background-position: -738px -675px !important;
        }
      }

      &-text {
        position: absolute;
        top: 15px;
        right: 90px;
        font-size: 30px;
        width: 45px;
        text-align: right;

        &--disabled {
          opacity: 0.2;
        }
      }
    }
  }

  &__bet {
    width: 100%;
    padding: 10px 40px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
  }

  &__btn {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    &-autoPlay {
      width: 120px;
      height: 120px;
      background-image: url('/reveal.png');
      background-repeat: no-repeat;
      background-position: -590px -854px;
      zoom: 0.4;

      &--disabled {
        background-position: -800px -611px;
      }
    }

    &-stopAutoPlay {
      width: 120px;
      height: 120px;
      background-image: url('/reveal.png');
      background-repeat: no-repeat;
      background-position: -590px -608px;
      zoom: 0.4;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;

      > span {
        margin-left: -2px;
      }
    }

    &-bet {
      width: 560px;
      height: 118px;
      background-image: url('/button.png');
      background-repeat: no-repeat;
      background-position: 0 -380px;
      zoom: 0.4;
      position: relative;

      &--disabled {
        background-position: 0 -494px;
      }
    }

    &-cash {
      width: 560px;
      height: 118px;
      background-image: url('/button.png');
      background-repeat: no-repeat;
      background-position: -830px 0;
      zoom: 0.4;
      position: relative;

      &--disabled {
        background-position: -567px -250px;
      }

      &-amount {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30px;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        padding: 2px 40px;
        line-height: 1;
      }
    }
  }
}